<template>
  <div>
    <canvas ref="el" :width="WIDTH" :height="HEIGHT"></canvas>
  </div>
</template>

<!--<script lang="ts">-->
<!--export default {-->
<!--  name: 'Xh',-->
<!--};-->
<!--</script>-->

<script lang="ts">
export default defineComponent({
  name: 'Xh',
  setup() {
    const el = ref<HTMLCanvasElement>();
    const ctx = computed(() => el.value!.getContext('2d')!);
    const WIDTH = window.innerWidth;
    const HEIGHT = window.innerHeight;
    interface Point {
      x: number;
      y: number;
    }

    interface Branch {
      start: Point;
      length: number;
      theta: number; // 夹角角度
    }

    onMounted(() => {
      init();
      console.group('窗口大小');
      console.log('WIDTH:', WIDTH);
      console.log('HEIGHT:', HEIGHT);
      console.groupEnd();
    });

    function randomColor() {
      var col = '#';
      for (var i = 0; i < 6; i++)
        col += parseInt(Math.random() * 16).toString(16);
      return col;
    }

    function init() {
      ctx.value.strokeStyle = randomColor();
      ctx.value.globalAlpha = 0.6;
      // el.value!.style.border = Math.random() > 0.5 ? 'solid' : 'dashed';

      step({
        start: {
          x: WIDTH / 2,
          y: HEIGHT,
        },
        length: 5,
        theta: -Math.PI / 2,
      });
    }

    const pendingTasks: Function[] = [];

    watch(pendingTasks, (newVal) => {
      console.log(newVal);
    });

    function step(b: Branch, depth = 0) {
      const end = getEndPoint(b);
      drawBranch(b);
      if (depth < Math.floor(Math.random() * 10 + 2) || Math.random() < 0.5) {
        pendingTasks.push(() =>
          step(
            {
              start: end,
              length: b.length + (Math.random() * 10 - 5),
              theta: b.theta - 0.6 * Math.random(),
            },
            depth + 1
          )
        );
      }

      if (depth < Math.floor(Math.random() * 10 + 2) || Math.random() < 0.5) {
        pendingTasks.push(() =>
          step(
            {
              start: end,
              length: b.length + (Math.random() * 10 - 5),
              theta: b.theta + 0.6 * Math.random(),
            },
            depth + 1
          )
        );
      }
    }

    function frame() {
      const tasks = [...pendingTasks];
      pendingTasks.length = 0;
      tasks.forEach((fn) => fn());
    }

    let frameCount = 0;
    function startFrame() {
      requestAnimationFrame(() => {
        frameCount += 1;
        if (frameCount % 3 === 0) frame();
        startFrame();
      });
    }
    startFrame();
    // setInterval()

    function lineTo(p1: Point, p2: Point) {
      ctx.value.beginPath();
      ctx.value.moveTo(p1.x, p1.y);
      ctx.value.lineTo(p2.x, p2.y);
      ctx.value.stroke();
    }

    function getEndPoint(b: Branch): Point {
      return {
        x: b.start.x + b.length * Math.cos(b.theta),
        y: b.start.y + b.length * Math.sin(b.theta),
      };
    }

    function drawBranch(b: Branch) {
      const { start } = b;
      lineTo(start, getEndPoint(b));
    }

    return {
      el,
      WIDTH,
      HEIGHT,
    };
  },
});
</script>

<style></style>
